<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>document</title>
  <script type="text/javascript">
    window.onload = function (){
      var Box = document.getElementById('box');
      var Li = Box.getElementsByTagName('li');
      var P = document.getElementsByTagName('p')[0];
      for (var i = 0; i < Li.length; i++) {
        fun1(Li[i]);
      };
      function fun1(Li){
        var Btn = Li.getElementsByTagName('button');
        var Str= Li.getElementsByTagName('strong')[0];
        var Span = Li.getElementsByTagName('span');
        var num = Number(Str.innerHTML);
        var money = parseFloat(Span[0].innerHTML);
        Btn[0].onclick = function(){
          num--;
          if(num < 0){
            num = 0;
          }
          Str.innerHTML = num;
          Span[1].innerHTML = num * money + "元";
          count();
        }
        Btn[1].onclick = function(){
          num++;
          Str.innerHTML = num;
          Span[1].innerHTML = num * money + "元";
          count();
        }
      }
      var count = function() {
        var arr = [];
        var total_price = 0;
        var total_count = 0;
        for(var i = 0, len = Li.length; i < len; i++){
          var price = Li[i].getElementsByTagName('span')[0].innerHTML;
          var num = Li[i].getElementsByTagName('strong')[0].innerHTML;
          total_price += parseFloat(price) * parseInt(num);
          total_count += parseInt(num);
          if(Li[i].getElementsByTagName("strong")[0].innerHTML != "0"){
            arr.push(parseFloat(price));
          }
          function max(arr){
           var n = arr[0];
              for(var i=0;i<arr.length;i++){
                if(n < arr[i]){
                  n = arr[i]
                }
              }
              return n;
          }
        }
        var astrong = P.getElementsByTagName('strong');
        astrong[0].innerHTML = total_count;
        astrong[1].innerHTML = total_price;
        astrong[2].innerHTML = max(arr);
      }
    }
  </script>
</head>
<body>
  <ul id="box">
    <li>
      <button>-</button>
      <strong>0</strong>
      <button>+</button>
      单价：<span>12.5元</span>
      小计：<span>0元</span>
    </li>
    <li>
      <button>-</button>
      <strong>0</strong>
      <button>+</button>
      单价：<span>17元</span>
      小计：<span>0元</span>
    </li>
    <li>
      <button>-</button>
      <strong>0</strong>
      <button>+</button>
      单价：<span>8.5元</span>
      小计：<span>0元</span>
    </li>
    <li>
      <button>-</button>
      <strong>0</strong>
      <button>+</button>
      单价：<span>13.2元</span>
      小计：<span>0元</span>
    </li>
    <li>
      <button>-</button>
      <strong>0</strong>
      <button>+</button>
      单价：<span>21.7元</span>
      小计：<span>0元</span>
    </li>
    <li>
      <button>-</button>
      <strong>0</strong>
      <button>+</button>
      单价：<span>2.8元</span>
      小计：<span>0元</span>
    </li>
    <li>
      <button>-</button>
      <strong>0</strong>
      <button>+</button>
      单价：<span>13.6元</span>
      小计：<span>0元</span>
    </li>
  </ul>
  <p>
    商品合计共：<strong></strong>件，共花费了：<strong></strong>元<br />
    其中最贵的商品单价是：<strong></strong>元
  </p>
</body>
</html>